<template lang="pug">
  .category-results-base
    searchGoods2
    .category {{category}}
    goods-list(:goods="goods")
    load-more(v-if="loading")
</template>

<script>
import GoodsList from './components/GoodsList'
import SearchGoods2 from './components/SearchGoods2'
import Window from './helpers/window'
import LoadMore from './components/LoadMore'

export default {
  name: 'CategoryResults',
  components: {
    GoodsList, SearchGoods2, LoadMore
  },
  data () {
    return {
      goods: [],
      page: 1,
      loading: false,
      tip: '正在获取',
      showLoading: true
    }
  },
  methods: {
    getGoods () {
      this.loading = true
      this.$http.get('/proxy/api/goods', {params: {category: this.category, page: this.page}}).then((res) => {
        this.loading = false
        if (res.data.length === 0) {
          this.noData()
        }
        res.data.map((item) => {
          this.goods.push(item)
        })
        this.page += 1
      }, (err) => {
        this.loading = false
        console.log(err)
        this.noData()
      })
    },
    noData () {
      this.showLoading = false
      this.tip = '没有更多数据了'
    },
    listenScroll () {
      var _self = this
      window.onscroll = function () {
        if (Window.touchBottom() && _self.loading === false) {
          _self.getGoods()
        }
      }
    }
  },
  mounted () {
    this.getGoods()
    this.listenScroll()
  },
  computed: {
    category () {
      return this.$route.query.category
    }
  },
  watch: {
    '$route': function (to, from) {
      if (from.name === 'Category' && to.name === 'CategoryResults') {
        this.page = 1
        this.goods = []
        this.getGoods()
      }
    }
  }
}
</script>

<style lang="sass">
@import './styles/color.sass';
.category-results-base
  .category
    border-left: $red 3px solid
    padding: 5px
    border-bottom: $gray-bg 1px solid
    color: $red
</style>
